<template>
  <div><!--
    <!--左侧空白200px-->
    <el-container>
      <el-aside width="200px"></el-aside>
      <el-main>
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark">
            <el-image style="border: 0px" :src="url"></el-image>
            <el-button style="height:80px;background-color: #242424;border: 0px;color: white;width: 70px">发现音乐</el-button>
            <el-button style="height:80px;background-color: #242424;border: 0px;color: white;width: 70px">我的音乐</el-button>
            <el-button style="height:80px;background-color: #242424;border: 0px;color: white;width: 50px">朋友</el-button>
            <el-button style="height:80px;background-color: #242424;border: 0px;color: white;width: 50px">商城</el-button>
            <el-button style="height:80px;background-color: #242424;border: 0px;color: white;width: 70px">音乐人</el-button>
            <el-button style="height:80px;background-color: #242424;border: 0px;color: white;width: 120px">下载客户端</el-button>
            <el-input v-model="input" placeholder="请输入内容" style="width: 200px"></el-input>
            <el-button round style="background-color: #242424;border :0px;color: white;width: 90px">创作者中心</el-button>

              <el-button type="text" @click="outerVisible = true">登录</el-button>


          </div></el-col>
        </el-row>

      </el-main>

      <el-aside width="200px"></el-aside>
      </el-container>
    <!--导航栏-->
   <!--  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
          <template slot="title">我的工作台</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="3">消息中心</el-menu-item>
        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
      </el-menu>-->



    <el-dialog  title="登录"  :visible.sync="outerVisible">
      <el-dialog
        width="30%"

        title="登录页面"
        :visible.sync="innerVisible"
        append-to-body>

        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名" >
            <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.pass" placeholder="请输入密码 "></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" style="width: 340px">立即登录</el-button>
          </el-form-item>
        </el-form>

        <el-divider style="margin-top: 50px"></el-divider>

        <el-button type="primary" style="width: 130px;height: 35px" icon="el-icon-arrow-left" @click="innerVisible = false">其他登录方式</el-button>


      </el-dialog>



      <div slot="footer" class="dialog-footer">
        <div class="el-dialog__body">
          <div id="left" style="float: left;margin-top: -100px;margin-left: -40px">
            <img src="http://qhwykybp2.hd-bkt.clouddn.com/hua.png">
            <div id="but1" style="margin-top: 10px">
              <!--<el-button type="primary" round style="width: 320px">主要按钮</el-button>-->
              <el-button type="primary" @click="innerVisible = true" style="width: 320px">用户名登录</el-button>

            </div>
            <div id="but2" style="margin-top: 10px">
              <el-button type="text" @click="dialogVisible = true" style="width: 320px;background-color: #D2D0D0">注册</el-button>
              <el-dialog
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">

                <div id="zhuce">
                  注册界面
                </div>

                <div class="fr">
                  <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名" >
                      <el-input v-model="form.uname" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                      <el-input v-model="form.upass" placeholder="请输入密码 "></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onSubmit" style="width: 340px">立即注册</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
              </el-dialog>



            </div>
          </div>

          <div id="right" style="float: left;margin-top: -70px">
            <el-divider direction="vertical"></el-divider>
            <div id="right1" style="float: left;width: 340px">
              <div class="weixin" style="float: left" >
                <img src="http://qhwykybp2.hd-bkt.clouddn.com/weixin.png"/>
                <div class="font" style="float: right;padding-left: 16px;padding-top: 17px">微信登录</div>
              </div>

              <div class="qq" style="float: left">
                <img src="http://qhwykybp2.hd-bkt.clouddn.com/qq.png"/>
                <div class="font" style="float: right;padding-left: 16px;padding-top: 17px">qq登录</div>
              </div>

              <div class="weibo" style="float: left">
                <img src="http://qhwykybp2.hd-bkt.clouddn.com/weibo.png"/>
                <div class="font" style="float: right;padding-left: 16px;padding-top: 17px">微博登录</div>
              </div>

              <div class="emial" style="float: left">
                <img src="http://qhwykybp2.hd-bkt.clouddn.com/email.png"/>
                <div class="font" style="float: right;padding-left: 16px;padding-top: 17px">网易邮箱登录</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--<el-button @click="outerVisible = false">取 消</el-button>
      <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>-->

    </el-dialog>

    <router-view/>
  </div>

</template>

<script>
/*export default {
  name: 'App'
}*/
export default {
  data() {
    return {

      activeIndex: '1',
      activeIndex2: '1',
      url:'http://qhwykybp2.hd-bkt.clouddn.com/logo2.jpg',
      form:{},
      outerVisible: false,
      innerVisible: false,
      dialogVisible: false
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    onSubmit() {
      console.log('submit!');
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
}
</script>

<style scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
el-row {
  margin-bottom: 20px;
  /* &:last-child {
      margin-bottom: 0;
    }*/
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #242424;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #fff;
}
.grid-content {
  border-radius: 4px;
  min-height: 80px;
}
.grid-content1 {
  border-radius: 4px;
  min-height: 300px;
  background-color: aquamarine;
}
.grid-content2 {
  border-radius: 4px;
  min-height: 80px;
  background-color: azure;
}
.grid-content3 {
  border-radius: 4px;
  min-height: 80px;
  background-color: white;
}
.grid-content4 {
  border-radius: 4px;
  min-height: 80px;
  background-color: peachpuff;
}
.el-dialog{
  height: 410px;
}
.el-dialog__title {
  line-height: 24px;
  font-size: 18px;
  color: white;
  margin-left: -15px;
}
.el-dialog__header {
  padding: 20px 20px 10px;
  background-color: black;
}
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 20em;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
  float: left;
}
.weixin{
  margin-left: 30px;
}
.qq {
  margin-left: -130px;
  margin-top: 62px;
}
.weibo {
  margin-left: -130px;
  margin-top: 130px;
}
.emial {
  margin-left: -130px;
  margin-top: 200px;
}
.el-dialog__title1 {
  line-height: 24px;
  font-size: 18px;
  color: white;
  margin-left: -15px;
}
#zhuce {
  /* background-color: red; */
  font-size: 22px;
  margin-left: 121px;
  width: 150px;
}
.fr{
  margin-top: 20px;
}
.el-dialog{
  height: 410px;
}
.el-dialog__title {
  line-height: 24px;
  font-size: 18px;
  color: white;
  margin-left: -15px;
}
.el-dialog__header {
  padding: 20px 20px 10px;
  background-color: black;
}
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 20em;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
  float: left;
}
.weixin{
  margin-left: 30px;
}
.qq {
  margin-left: -130px;
  margin-top: 62px;
}
.weibo {
  margin-left: -130px;
  margin-top: 130px;
}
.emial {
  margin-left: -130px;
  margin-top: 200px;
}
.el-dialog__title1 {
  line-height: 24px;
  font-size: 18px;
  color: white;
  margin-left: -15px;
}
#zhuce {
  /* background-color: red; */
  font-size: 22px;
  margin-left: 121px;
  width: 150px;
}
.fr{
  margin-top: 20px;
}
</style>
